<template>
    <header class="hidden-xs-only">

        <!-- 菜单栏 -->
        <div class="menu-body">
            <div class="headerInfo">
                <div class="companyName">
                    <el-icon>
                        <home-filled />
                    </el-icon>
                    北京安豪欣宝国际会议展览服务有限公司
                </div>
                <div class="right-info">
                    <div class="mail-info">
                        <el-icon>
                            <message />
                        </el-icon>

                        anhao@163.com
                    </div>
                    <div class="phoneNum">
                        <el-icon>
                            <phone />
                        </el-icon>
                        010-12345678
                    </div>
                </div>
            </div>
            <!-- <div class="menu-body">
                <div class="menus">
                  <div 
                    class="menu-item"
                    v-for="menuItem in menuItems"
                    :key="menuItem.id"
                    :class="{ 'active': menuItem.isActive }"
                    @click="activateMenuItem(menuItem)"
                  >
                    {{ menuItem.label }}
                  </div>
                </div>
              </div> -->
            <div class="menu-contaienr">
                <router-link to="/main">
                    <div class="index-logo">
                        <img class="text-logo" src="../static/text-logo.jpg" alt="">
                    </div>
                </router-link>
                <!-- <div class="menus">
                    <div 
                      class="menu-item"
                      v-for="menuItem in menuItems"
                      :key="menuItem.id"
                      :class="{ 'active': menuItem.isActive }"
                      @click="activateMenuItem(menuItem)"
                    >
                      {{ menuItem.label }}
                    </div>
                  </div> -->
                <div class="menus">
                    <!-- <div class="menu-item" v-for="menuItem in menuItems" :key="menuItem.id"
                        :class="{ 'active': menuItem.isActive }" @mouseover="activateSubMenu(menuItem.name)"
                        @click="activateMenuItem(menuItem)">

                        <router-link :to="menuItem.path" class="routerStyle">{{ menuItem.label }}</router-link>
                    </div> -->

                    <!-- 第一版本 -->
                    <!-- <div class="meun-item" @mouseover="activateSubMenu('explore')"><router-link to="/main">首页</router-link></div>
                    <div class="meun-item" @mouseover="activateSubMenu('learn')"><router-link to="/exhibitionPerview">会展预览</router-link></div>
                    <div class="meun-item" @mouseover="activateSubMenu('individuals')">我的预定</div>
                    <div class="meun-item" @mouseover="activateSubMenu('business')">个人中心</div>
                    <div class="meun-item" @mouseover="activateSubMenu('developers')">人工客服</div> -->

                    <!-- 第二版本 -->
                    <div class="meun-item"><router-link to="/main">首页</router-link></div>
                    <div class="meun-item"><router-link to="/exhibitionPerview">会展预览</router-link></div>
                    <div class="meun-item"><router-link to="/myOrder">我的预定</router-link></div>
                    <div class="meun-item" @mouseleave="hideSubMenu" @mouseover="activateSubMenu('business')">
                        <router-link to="/userCenter">个人中心</router-link>
                    </div>
                    <div class="meun-item"><router-link to="/service">人工客服</router-link></div>





                </div>
                <el-popconfirm title="是否退出登录?" @confirm="loginOut" confirm-button-text="退出" cancel-button-text="取消"
                    icon="">
                    <template #reference>
                        <div class="langSwitch cursor">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            <div class="">用户011</div>
                        </div>
                    </template>
                </el-popconfirm>

            </div>
        </div>
        <!-- 二级菜单 -->

        <div class="sub-menu" v-if="isActive" @mouseleave="hideSubMenu" @mouseenter="cancelHideSubMenu">
            <div class="subMenu-container">
                <div class="subMenu-item" v-for="item in activeSubMenu" :key="item.id">
                    <!-- <router-link :to="item.path"> -->
                    <div @click="gotoSubMenu(item.path)">
                        <el-icon size="12">
                            <ArrowRightBold />
                        </el-icon><span style="margin-left: 20px;cursor: pointer;">{{ item.name }}</span>
                    </div>
                    <!-- </router-link> -->
                </div>
            </div>
        </div>

    </header>


    <!-- 手机版的导航栏 -->
    <header class="hidden-sm-and-up">
        <!-- 菜单栏 -->
        <div class="menu-body2">
            <div class="menu-contaienr">
                <router-link to="/main">
                    <div class="index-logo">
                        <img class="text-logo" src="../static/text-logo.jpg" alt="">
                    </div>
                </router-link>
                <div class="langSwitch">
                    <el-icon @click="drawer = true">
                        <Menu />
                    </el-icon>
                </div>
            </div>
        </div>
        <!-- 二级菜单 -->

        <el-drawer v-model="drawer" title="" size="60%" :direction="direction">
            <div class="flex-aliign-column meun-phone">
                <router-link to="/myTool">
                    <div class="flex-aliign-center cursor">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

                        <div class="ml10 ">用户01</div>

                    </div>
                </router-link>
                <div>
                    <router-link to="/main">首页</router-link>
                </div>
                <div>

                    <router-link to="/exhibitionPerview">会展预览</router-link>

                </div>
                <div>

                    <router-link to="/myOrder">我的预订</router-link>
                </div>
                <div>

                    <!-- <router-link to="/userCenter">个人中心</router-link> -->

                    <el-dropdown>
                        <span class="el-dropdown-link" style="color: #000000;font-size: 16px">
                            个人中心
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item><router-link to="/userCenter">个人信息</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link
                                        to="/commonContactsPerson">常用联系人</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link to="/myFavorites">我的收藏</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link to="/myHistory">我的历史</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link to="/myCoupon">我的优惠券</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link to="/myWallet">我的钱包</router-link></el-dropdown-item>
                                <el-dropdown-item><router-link to="/myIntegral">我的积分</router-link></el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div>

                    <router-link to="/service">人工客服</router-link>
                </div>
            </div>
        </el-drawer>
    </header>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { useI18n } from 'vue-i18n'
    const { t, locale } = useI18n()
    import { useRouter } from 'vue-router';

    const router = useRouter();


    // 退出登录
    const loginOut = () => {
        // console.log("退出登录")
        // 跳转到登录页面
        router.push("/login")
    }
    function setLang() {

        locale.value = locale.value === "en" ? "cn" : "en"  // 设置语言模式
    }
    const activeIndex = ref(-1)
    // 点击二级菜单跳转到某个页面
    const gotoSubMenu = (path: string) => {
        // console.log(path)
        // 使用方法跳转路由
        router.push(path);

    }

    const handleClick = (index) => {
        // 更新 activeIndex 为当前点击项的索引
        this.activeIndex = index;
    }

    const drawer = ref(false)
    const direction = ref('ltr')
    // 定义不同菜单项对应的二级菜单数据
    const subMenus = {
        explore: [
            { id: 1, name: 'Submenu 1' },
            { id: 2, name: 'Submenu 2' },
            { id: 3, name: 'Submenu 3' }
        ],
        learn: [
            { id: 4, name: 'Submenu 4' },
            { id: 5, name: 'Submenu 5' }
        ],
        individuals: [
            { id: 6, name: 'Submenu 6' },
            { id: 7, name: 'Submenu 7' }
        ],
        business: [
            { id: 8, name: '常用联系人', path: '/commonContactsPerson' },
            { id: 13, name: '我的收藏', path: '/myFavorites' },
            { id: 11, name: '我的历史', path: '/myHistory' },
            { id: 12, name: '我的优惠券', path: '/myCoupon' },
            { id: 14, name: '我的钱包', path: '/myWallet' },
            { id: 15, name: '我的积分', path: '/myIntegral' },
        ],
        developers: [
            { id: 10, name: 'Submenu 10' }
        ],
    }
    const menuItems = [
        { id: 1, label: '首页', isActive: false, path: '/main', name: 'explore' },

        { id: 2, label: '会展预览', isActive: false, path: '/exhibitionPerview', name: 'learn' },

        { id: 3, label: '我的预定', isActive: false, path: '/myOrder', name: 'individuals' },

        { id: 4, label: '个人中心', isActive: false, path: '/userCenter', name: 'business' },

        { id: 5, label: '人工客服', isActive: false, path: '/service', name: 'developers' },


    ]

    // 激活菜单项
    const activateMenuItem = (menuItem) => {
        menuItems.forEach(item => {
            item.isActive = item.id === menuItem.id
        })
    }

    // 当前激活的菜单项
    const activeMenu = ref(null)
    // const activeIndex = ref('1')
    let isActive = ref(false)
    // 当前激活菜单项对应的二级菜单数据
    const activeSubMenu = ref(null)
    // 鼠标移入菜单项时触发
    const activateSubMenu = (menu: string) => {
        isActive.value = true
        activeMenu.value = menu
        activeSubMenu.value = subMenus[menu]
    }
    // 隐藏二级菜单
    const hideSubMenu = () => {
        isActive.value = false
    }
    // 取消隐藏二级菜单
    const cancelHideSubMenu = () => {
        isActive.value = true
    }
    const handleSelect = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    a {
        color: #000000;
    }

    .routerStyle {
        color: #000000;
    }

    .meun-phone {
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: space-around;

    }

    .active {
        border-bottom: 3px solid #0052ff;
    }

    .menu-item {
        cursor: pointer;
        display: flex;
        align-items: center;

    }

    .menu-item.active {
        /* 添加额外的样式，例如改变文字颜色 */
        color: #356CEB;
        font-weight: bold;
        border-bottom: 3px solid #0052ff;
    }

    .langSwitch {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 14px;
    }

    /* 默认的样式 */
    .router-link {
        color: #000000;
    }

    .router-link-exact-active {
        color: #000000;

        /* 设置路由链接被激活时的样式 */
        /* 例如，可以修改链接的颜色、背景色等 */
    }

    /* 路由选中的样式 */
    .router-link-active {
        color: #356CEB;
    }


    .menu-body2 {
        border-bottom: 1px solid #edeff1;
        width: 100%;

        .menu-contaienr {
            display: flex;
            margin: 0 auto;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            width: 80%;

            .index-logo {
                display: flex;
                align-items: center;
                justify-content: center;

                .text-logo {
                    width: 100px;
                }
            }

            .menus {
                height: 60px;
                display: flex;
                width: 700px;
                justify-content: space-around;

                .meun-item {
                    cursor: pointer;
                    line-height: 60px;
                    font-weight: 500;

                    &:hover {
                        color: #0052ff;

                        border-bottom: 3px solid #0052ff;
                    }
                }
            }
        }
    }

    .menu-body {
        border-bottom: 1px solid #edeff1;
        width: 100%;

        .headerInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            margin: 0 auto;
            max-width: $primary-max-width;

            .companyName {
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                width: 60%;
                color: #5c616d;

                .el-icon {
                    font-size: 14px;
                }
            }

            .right-info {

                display: flex;
                gap: 130px;

                .mail-info {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    color: #5c616d;

                    .el-icon {
                        font-size: 14px;
                    }
                }

                .phoneNum {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    color: #5c616d;

                    .el-icon {
                        font-size: 14px;
                    }
                }
            }
        }

        .menu-contaienr {
            display: flex;
            margin: 0 auto;
            padding: 0 20px;
            height: 60px;
            align-items: center;
            justify-content: space-between;
            max-width: $primary-max-width;

            .index-logo {
                display: flex;
                align-items: center;
                justify-content: center;

                .text-logo {
                    width: 100px;
                }
            }

            .menus {
                height: 60px;
                display: flex;
                width: 700px;
                justify-content: space-around;

                .meun-item {
                    cursor: pointer;
                    line-height: 60px;
                    font-weight: 500;

                    /* &:hover {
                        color: #0052ff;

                        border-bottom: 3px solid #0052ff;
                    } */
                }
            }
        }
    }

    .sub-menu {
        position: absolute;
        top: 102px;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #fff;
        box-shadow: 3px 3px 5px #919191;

        .subMenu-container {
            width: 600px;
            margin: 0 auto;
            padding: 30px 0;

            .subMenu-item {
                font-weight: 500;
                line-height: 50px;
                display: flex;
                align-items: center;
            }
        }
    }
</style>